<template> 
  <div>
    <el-card shadow="always" :body-style="{ padding: '20px' }" v-show="scene===1">
      <el-row :gutter="20">
          <el-col :span="1" :offset="0">
          <el-button type="primary" size="default" @click="addteacherlist">添加</el-button>
        </el-col>
        <el-col :span="1" :offset="0">
          <el-button type="primary" size="default" @click="byidgetlistdata(teacherid)">查询</el-button>
        </el-col>
        <el-col :span="8" :offset="0">
          <el-input v-model="teacherid" placeholder="查询用户编号.." size="normal" clearable @change="changeinput"></el-input>
        </el-col>
      </el-row>
    </el-card>
    <el-table :data="listdata" border stripe  v-show="scene===1">
      <el-table-column type="index" prop="col.id" label="序号" :width="80">
      </el-table-column>
      <el-table-column prop="col.id" label="用户编号" width="80">
        <template slot-scope="{ row, $index }">
          <div>
            {{ row.id }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="col.id" label="用户名" width="width">
        <template slot-scope="{ row, $index }">
          <div>
            {{ row.userName }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="col.id" label="联系方式" width="width">
        <template slot-scope="{ row, $index }">
          <div>
            {{ row.phone }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="col.id" label="密码" width="width">
        <template slot-scope="{ row, $index }">
          <div class="truncate">
            {{ row.userPawd }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="col.id" label="别名" width="width">
        <template slot-scope="{ row, $index }">
          <div>
            {{ row.nickName }} 
          </div>
        </template>
      </el-table-column>
     
      <el-table-column prop="col.id" label="照片" width="width">
        <template slot-scope="{ row, $index }">
          <div>
            <img :src="row.URLIMG" style="width: 120px;height: 120px;">
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="prop" label="操作" width="width">
        <template slot-scope="{ row, $index }">
          <div>
            <el-button
              v-show="row.isSale"
              type="success"
              size="mini"
              icon="el-icon-sort-up"
              circle
              @click="downdatashop(row)"
            ></el-button>
            <el-button
              v-show="!row.isSale"
              type="primary"
              size="mini"
              icon="el-icon-sort-down"
              circle
              @click="updatashop(row)"
            ></el-button>

            <el-button
              type="warning"
              size="mini"
              circle
              icon="el-icon-edit"
              @click="showshopdetail(row)"
            ></el-button>
            <el-button
              type="info"
              size="mini"
              circle
              icon="el-icon-info"
              @click="maintenance(row)"
            ></el-button>
            <el-button
              type="danger"
              size="mini"
              circle
              icon="el-icon-delete"
              @click="deletebut(row)"
            >
            </el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-drawer
      style="font-size: 30px; color: #000"
      title="用户详情:"
      :visible.sync="drawer"
      :direction="direction"
      size="50%"
      :before-close="handleClose"
    >
      <el-row>
        <el-col :span="5">姓名</el-col>
        <el-col :span="16" style="color:#0a84ff ;"> {{   showparentdata.userName }}</el-col>
      </el-row>
     
      <el-row>
        <el-col :span="5">性别</el-col>
        <el-col :span="16" style="color:#0a84ff ;"> {{   showparentdata.sex }}</el-col>
      </el-row>
      <el-row>
        <el-col :span="5">籍贯</el-col>
        <el-col :span="16" style="color:#0a84ff ;"> {{   showparentdata.arce }}</el-col>
      </el-row>
      <el-row>
        <el-col :span="5">生日</el-col>
        <el-col :span="16" style="color:#0a84ff ;">{{   showparentdata.birthday }} </el-col>
      </el-row>
      <el-row>
        <el-col :span="5">联系方式</el-col>
        <el-col :span="16" style="color:#0a84ff ;"> {{   showparentdata.phone }}</el-col>
      </el-row>
      <el-row>
        <el-col :span="5">个性签名</el-col>
        <el-col :span="16" style="color:#0a84ff ;"> {{   showparentdata.signature }}</el-col>
      </el-row>
      <el-row>
        <el-col :span="5">WeChat</el-col>
        <el-col :span="16" style="color:#0a84ff ;">{{   showparentdata.WeChat }} </el-col>
      </el-row>
      
      <el-row>
        <el-col :span="5">QQ</el-col>
        <el-col :span="16" style="color:#0a84ff ;"> {{   showparentdata.QQ }}</el-col>
      </el-row>
      <!-- 价格 -->
      <el-row>
        <el-col :span="5">邮箱</el-col>
        <el-col :span="16" > {{   showparentdata.email }}</el-col>
      </el-row>
     
      <el-row>
        <el-col :span="5">别名</el-col>
        <el-col :span="16"> {{   showparentdata.nickName }}</el-col>
      </el-row>
      <el-row>
        <el-col :span="5">图片</el-col>
        <el-col :span="16">
          <img :src="  showparentdata.IMGURL" style="width: 120px;">
      </el-col>
      </el-row>
      
    </el-drawer>
    <div v-show="scene===2">
        <!-- @spusendscene="spusendscene" -->
        <spuindex  ref="spu" > </spuindex>
      </div>
   
  </div>
</template>

<script>
import spuindex from './spuform/index.vue'
export default {
  name: "",
  data() {
    return {
      listdata_r: [],
      listdata: [],
      listselect: "",
      isSale: true,
      drawer: false, //抽屉展示与隐藏
      direction: "rtl",
      teacherid: "",
      showcontent: "",
        showparentdata:{},
       scene:1,
      rules: {
          teacherid: {
                        rule: /^[0-9]+$/,
                        msg: "输入异常.."
                    },
        }
    }
    
  },
  components:{
       spuindex
  },
  methods: {
          //正则校验
            validate(key) {
                let bool = true;
                if (!this.rules[key].rule.test(this[key])) {
                    this.$message({
                        message: this.rules[key].msg,
            type:"warning"
                    })
                    bool = false;
                    return bool;
                }
                return bool;
            },
    async updatashop(row) {
      row.isSale = 1;
     
    },
    //下架数据的回调
    async downdatashop(row) {
      row.isSale = 0;
    
    },
    //展开详细详情:
    async showshopdetail(row) {
      this.drawer = true;

      let result = await this.$API.parentManagement.getbackparentdetail(row.id || row);
      console.log(result);
      if(result.code === 200){
              const IMGURL = `http://zyc28.natapp1.cc/${result.data[0].imgUrl}`;
              this.  showparentdata= {...result.data[0],IMGURL}
      }
      console.log(this.  showparentdata);
    },
    //开发维护
    maintenance(row) {
      this.$message("开发维护中...");
    },
    //删除按钮的回调
    deletebut(row) {
      this.$message("暂时不支持删除...");
    },
    //获取用户所有数据
    async getlistdata() {
      let result = await this.$API.parentManagement.getbackparent();
      if (result.code === 200) {
        console.log(result);
        this.listdata = result.data.map((obj, index) => {
          if(obj.provider == "tel"){
            const URLIMG = `https://zyc618.mynatapp.cc/${obj.imgUrl}`;
            return { ...obj, URLIMG };
          }else{
            const URLIMG = `${obj.imgUrl}`;
            return { ...obj, URLIMG };
          }
          // 构建URLIMG属性，例如基于id生成一个URL
        
          // 使用扩展运算符（...）将现有对象的属性复制到新对象中
       
       
      });
      }
    },
    //根据id号查询教师数据:
    async byidgetlistdata(teacherid){
      if(! this.validate('teacherid')){
         this.getlistdata()
        return
      }else{
          this.showshopdetail(teacherid)
      }
     
    },
    //发起修改保存回调
    savecontent() {
      this.$message("开发维护中...");
    },
    //确认关闭？
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    changeinput(value){
    },
    addteacherlist(){
      this.scene = 2;
    // this.$refs.spu.initSpuData(row);
    }
   
  },
  mounted() {
    this.getlistdata();
  },
  computed:{
     
    }
};
</script>

<style scoped>
.truncate {
  overflow: hidden;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  width: 200px; /* 设置宽度 */
}
.el-row .el-col-5{
  font-size: 18px;
  text-align: right;
}
.el-col{
  margin: 10px 10px;
  font-size: 14px;
  align-content: center;
}
.el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
  }
  
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
</style>
